<template>
  <div class="card-container">
    <el-table :data="CompetitionTable.slice((currentPage - 1) * pagesize, currentPage * pagesize)" stripe style="width: 100%;font-size: 20px" size="large">
      <el-table-column prop="cid" label="比赛编号" width="180">
      </el-table-column>
      <el-table-column prop="cName" label="比赛名称" width="180">
        <template v-slot="scope">
          <router-link :to="{path: '/CompetitionDetail', query:{cid: scope.row.cid} }">{{scope.row.cName}}</router-link>
        </template>
      </el-table-column>
      <el-table-column prop="startTime" label="开始时间" width="180" />
      <el-table-column prop="endTime" label="结束时间" width="180" />
      <el-table-column prop="desc" label="描述" width="180" />
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="CompetitionTable.length"
    />
  </div>
</template>

<script>
import api from "../api/api.js";


export default {
  name: "Competition",
  data() {
    return {
      CompetitionTable: [
        /*{
          cid: '',
          cName: '',
          startTime: '',
          endTime: '',
          desc: ''
        }*/
      ],
      currentPage: 1, // 初始页
      pagesize: 5 // 每页的数据
    }
  },
  created() {
    this.handleCompetitionTable();
  },
  mounted() {

  },
  methods: {
    // 初始页currentPage, 初始每页数据数pagesize 和 数据data  (为了方便就不使用数据库limit进行处理了)
    handleSizeChange (size) {
      console.log(size, 'size');
      this.pagesize = size;
      console.log(this.pagesize); // 每页下拉显示数据
    },
    handleCurrentChange (currentPage)
    {
      console.log(currentPage,'currentPage');
      this.currentPage = currentPage;
      console.log(this.currentPage); //点击第几页
    },
    handleCompetitionTable()
    {
      api
          .GetCompetitionsList(null)
          .then((res) => {
                if (res && res.data)
                {
                  for (var i = 0; i < res.data.length; i++)
                  {
                    this.CompetitionTable.push({
                      cid: res.data[i].cid,
                      cName: res.data[i].cName,
                      startTime: res.data[i].startTime,
                      endTime: res.data[i].endTime,
                      desc: res.data[i].desc
                    })
                  }
                }
              }
          )
    }
  }
}
</script>

<style lang="scss" scoped>

@import '../_utility.scss';

.card-container {
  @include basic-card;
  margin-top: 20px;
}

.el-pagination:deep {
  margin-top: 20px;
}

.el-pagination:deep .el-pager .number {
  font-size: 20px;
}

</style>
